<div style="POSITION: relative" id="content">
  <h3>使用easyUI创建一个border layout在你的web页面</h3>
  <div id="article_content" class="article_content">
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">&nbsp;border layout提供5个区域:<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">east,west,north,south,center.
      以下是一些正常用法:</span></span><br>
    </p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></p>
    <ul style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">
      <li>north区域可以使用作为你的网站的标语.</li>
      <li>south区域可以用来显示版权以及一些说明.</li>
      <li>west区域可以用来做导航菜单.</li>
      <li>east区域可以显示一些你的推广的项目.</li>
      <li>center区域用来显示主要的内容.</li>
    </ul>
    <img src="documentation/images/1344480296_6590.png" alt=""><br>
    <p></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><a href="http://www.jeasyui.com/tutorial/layout/layout_demo.html" target="_blank" style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left">查看
      Demo</a><br>
      </span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">应用一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">layout你应该确定一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">layout
      容器然后定义一些区域,<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">layout 必须至少需要一个center区域,以下是一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">layout 示例:</span></span></span></span></span></span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span></span></span></span>
    <pre name="code" class="html">&lt;div class=&quot;easyui-layout&quot; style=&quot;width:400px;height:200px;&quot;&gt;  
    &lt;div region=&quot;west&quot; split=&quot;true&quot; title=&quot;Navigator&quot; style=&quot;width:150px;&quot;&gt;  
        &lt;p style=&quot;padding:5px;margin:0;&quot;&gt;Select language:&lt;/p&gt;  
        &lt;ul&gt;  
            &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; onclick=&quot;showcontent('java')&quot;&gt;Java&lt;/a&gt;&lt;/li&gt;  
            &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; onclick=&quot;showcontent('cshape')&quot;&gt;C#&lt;/a&gt;&lt;/li&gt;  
            &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; onclick=&quot;showcontent('vb')&quot;&gt;VB&lt;/a&gt;&lt;/li&gt;  
            &lt;li&gt;&lt;a href=&quot;javascript:void(0)&quot; onclick=&quot;showcontent('erlang')&quot;&gt;Erlang&lt;/a&gt;&lt;/li&gt;  
        &lt;/ul&gt;  
    &lt;/div&gt;  
    &lt;div id=&quot;content&quot; region=&quot;center&quot; title=&quot;Language&quot; style=&quot;padding:5px;&quot;&gt;  
    &lt;/div&gt;  
&lt;/div&gt;  </pre>
    我们创建一个<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">border
    layout在一个&lt;div/&gt;容器中,<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">layout 切割容器分为2个部分,左边是导航菜单,右边是主要内容.</span></span><br>
    最后我们写一个click事件处理函数去检索数据,<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">showcontent函数非常简单.</span>
    </p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"></span></span></span></span></span></span></span>
    <pre name="code" class="javascript">function showcontent(language){  
    $('#content').html('Introduction to ' + language + ' language');  
}  </pre>
    </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载EasyUI示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/layout/downloads/easyui-layout-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-layout-demo.zip</a></div>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>